<template>
  <a-modal
    title="银行回单"
    width="45%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    :footer="null"
    destroyOnClose
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="回单"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-upload
            name="mediaFile"
            :showUploadList="false"
            :multiple="true"
            :before-upload="beforeUploadFile"
          >
<!--            <a-button :loading="uploadLoading">-->
<!--              <a-icon type="upload" />添加回单-->
<!--            </a-button>-->
          </a-upload>
          <div v-if="filenameList">
            <a-row
              :gutter="[15,15]"
              type="flex"
              align="middle">
              <a-col
                v-for="(item, index) in filenameList"
                :key="index"
                class="gutter-row"
                :span="item.type.indexOf('image')>-1?12:24"
              >
                <div
                  class="addbillimgbox"
                  v-if="item.type&&item.type.indexOf('image')>-1">
                  <img
                    class="addbillimg"
                    :src="isHttpString(item.name)?item: imageUrlPrefix + item.name"
                    alt
                  />
<!--                  <span class="addclose">-->
<!--                    &nbsp;-->
<!--                    <a-icon-->
<!--                      type="close"-->
<!--                      @click="removeFile(item.name)" />-->
<!--                  </span>-->
                </div>
                <div
                  class="addbillimgbox"
                  v-else>
                  <a
                    :href="isHttpString(item.name)?item: imageUrlPrefix + item.name"
                  >{{ (item.name).indexOf('@@@')==-1?item.name:(item.name).split('@@@')[1] }}</a>
                  <span class="addclose">
                    &nbsp;
                    <a-icon
                      type="close"
                      @click="removeFile(item.name)" />
                  </span>
                </div>
              </a-col>
            </a-row>
            <div style="margin-top:10px;"></div>
          </div>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import { addvoucher, uploadProjectFile } from '@/api/manage'
import config from '@/config/defaultSettings'
export default {
  name: 'EditMail',

  data() {
    return {
      invoiceNum: '',
      bankVoucher: '',
      form: this.$form.createForm(this),
      imageUrlPrefix: config.uploadedUrlPrefix,
      defaultFileList: [],
      filenameList: [],
      uploadLoading: false,
      mailAddrs: {},
      type: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      visible: false,
      confirmLoading: false,
      timer: null,
      time: 90,
      isNewPhoneModal: true
    }
  },
  created() { },
  methods: {
    //修改发票
    reviseInvio(o = {}) {
      this.defaultForm = o
    },
    //上传发票图片
    beforeUploadFile(file) {
      this.confirmLoading = true
      // const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      console.log(file, 1)
      this.file = file
      this.defaultFileList.push(file)
      // if (!isJpgOrPng) {
      //   this.$message.error('只能上传JPG或PNG图片！')
      // }
      // const isLt2M = file.size / 1024 / 1024 < 10
      // if (!isLt2M) {
      //   this.$message.error('图片需小于10M')
      // }
      // if (isJpgOrPng && isLt2M) {
      //   this.handleFileUpload('projectAttachment')
      // }
      this.handleFileUpload('bankVoucher')
      return false
    },
    handleFileUpload(fieldName) {
      const formData = new FormData()
      formData.append('mediaFile', this.file)
      this.uploadLoading = true
      uploadProjectFile(formData)
        .then(res => {
          const filename = res.resData && res.resData.result
          this.filenameList.push({ name: filename, type: this.file.type })
          console.log(filename)
          // this.form.setFieldsValue({
          //   [fieldName]: this.filenameList
          // })
          this.confirmLoading = false
        })
        .catch(() => {
          this.defaultFileList = []
          this.$message.error('上传失败，请重试')
        })
        .finally(() => {
          this.uploadLoading = false
        })
    },
    removeFile(data) {
      // this.defaultFileList = []
      // this.bankVoucher = ''
      // this.form.resetFields('bankVoucher')
      this.filenameList.splice(this.filenameList.findIndex(item => item.name === data), 1)
    },

    show(record) {
      console.log(record)
      this.filenameList = []
      if (record.bankVoucher) {
        this.bankVoucher = record.bankVoucher
        const arr = this.bankVoucher.split(',')
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].indexOf('.png') > -1 || arr[i].indexOf('.jpg') > -1 || arr[i].indexOf('.jpeg') > -1) {
            this.filenameList.push({ name: arr[i], type: 'image' })
          } else {
            this.filenameList.push({ name: arr[i], type: '' })
          }
        }
      } else {
        this.bankVoucher = ''
        this.filenameList = []
      }
      this.invoiceNum = record.invoiceNum ? record.invoiceNum : ''
      this.mailAddrs = record.batchId
      this.visible = true
    },

    handleCancel() {
      this.visible = false
    },
    handleSubmit() {
      this.form.validateFields((err, value) => {
        if (!err) {
          value.voucherFile = []
          for (let i = 0; i < this.filenameList.length; i++) {
            value.voucherFile.push(this.filenameList[i].name)

          }
          value.voucherFile = value.voucherFile.join(',')
          addvoucher(this.mailAddrs, value).then(res => {
            console.log(res)
            this.handleCancel()
            this.$emit('onSuccess')
            // this.$refs.table.refresh(true)
            // setTimeout(() => {
            //     window.location.reload()
            //   }, 50)
          })
        }
      })
    }
  }
}
</script>

<style>
.addbillimgbox {
  position: relative;
}
.addbillimg {
  width: 100%;
}
.addclose {
  position: absolute;
  right: 0;
  top: -10px;
}
</style>
